<template>
  <div class="content">
    <div style="margin-top: 5%">
      <div class="title">下载中</div>
      <el-table
          ref="multipleTable"
          :data="downloadingTableData"
          style="float:left;margin-left:12%;width:75%;color:#608bd2;"
          :row-class-name="tableRowClassName"
          @selection-change="handleDownloadingSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column type="index">
        </el-table-column>
        <el-table-column
            prop="song">
        </el-table-column>
        <el-table-column
            prop="progress">
          <template #default="scope">
            <el-progress :percentage="scope.row.progress" :color="customColors"></el-progress>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="line">
    </div>
    <div>
      <div class="title">下载完</div>
      <el-table
          ref="multipleTable"
          :data="downloadedTableData"
          style="float:left;margin-left:12%;width:75%;color:#608bd2;"
          :row-class-name="tableRowClassName"
          @selection-change="handleDownloadedSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column type="index">
        </el-table-column>
        <el-table-column
            prop="song">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
export default {
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'odd';
      }else{
        return 'even'
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleDownloadingSelectionChange(val) {
      this.downloadingMultipleSelection = val;
    },
    handleDownloadedSelectionChange(val) {
      this.downloadedMultipleSelection = val;
    },
  },
  data() {
    return {
      downloadedMultipleSelection: [],
      downloadingMultipleSelection: [],
      downloadingTableData: [{
        song: 'xxx',
        progress: 20,
      }, {
        song: 'xxx',
        progress: 40,
      },
      {
        song: 'xxx',
        progress: 60,
      },
      {
        song: 'xxx',
        progress: 80,
      },
      {
          song: 'xxx',
          progress: 80,
      },
      ],
      downloadedTableData: [
      {
        song: 'xxx',
      },
      {
        song: 'xxx',
      },
      {
        song: 'xxx',
      },
      {
        song: 'xxx',
      },
      ],
      percentage: 80,
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ]
    }
  }
}
</script>

<style scoped>
.content{
  flex-direction: column;
}
.line{
  margin: 40px 11%;
  text-align: center;
  border: 2px solid gray;
}
.title{
  color: #608bd2;
  font-size: 40px;
  position: absolute;
  margin-left: 14%;
  margin-top: -15px;
  z-index: 10;
}

</style>